<template>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="客户名称">
        <template #value>
          <view style="flex: 2">
            <up-input
              inputAlign="right"
              v-model="form.shopName"
              placeholder="请输入客户名称"
              border="none"
            ></up-input>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="联系人">
        <template #value>
          <view style="flex: 2">
            <up-input
              inputAlign="right"
              v-model="form.contact"
              placeholder="请输入联系人"
              border="none"
            ></up-input>
          </view>
        </template>
      </u-cell>
      <u-cell :border="false" title="联系电话">
        <template #value>
          <view style="flex: 2">
            <up-input
              inputAlign="right"
              v-model="form.mobile"
              placeholder="请输入联系电话"
              border="none"
            ></up-input>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="地址">
        <template #value>
          <view style="flex: 2">
            <up-input
              inputAlign="right"
              v-model="form.address"
              placeholder="请输入地址"
              border="none"
            ></up-input>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="经营描述">
        <template #value>
          <view style="flex: 2">
            <up-input
              inputAlign="right"
              v-model="form.business"
              placeholder="请输入经营描述"
              border="none"
            ></up-input>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="头像">
        <template #value>
          <view class="upload">
            <u-upload
              width="36"
              height="36"
              :fileList="fileList"
              @afterRead="afterRead"
              @delete="deleteFn"
              uploadIcon="plus"
              name="image"
              :maxCount="Max_FILE"
            ></u-upload>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="btn">
    <up-button
      type="primary"
      shape="circle"
      text="保存"
      @click="handleSubmit"
    ></up-button>
  </view>
</template>

<script setup>
import { reactive, computed } from "vue";
import { isMobile } from "@/utils/reg";
import { updateAuthentication } from "@/api/login";
import { useUploadFile, Max_FILE } from "@/hooks/useUpload";
import { useCheckForm } from "@/hooks/useCheckForm";
const { fileList, afterRead, deleteFn } = useUploadFile();
import { message } from "@/hooks/useToast";
import { useUserStore } from "@/store/user";

const userStore = useUserStore();

const respMallShopDTO = computed(() => {
  return userStore.respMallShopDTO;
});
const form = reactive({
  shopName: respMallShopDTO.value.shopName,
  contact: "",
  mobile: "",
  address: "",
  business: "",
});
const shopImage = computed(() => {
  try {
    return fileList.value[0].url;
  } catch (e) {
    return "";
  }
});
const { validate } = useCheckForm(
  {
    shopName: [{ required: true, message: "请输入客户名称" }],
    contact: [{ required: true, message: "请输入联系人" }],
    mobile: [
      { required: true, message: "请输入联系电话" },
      {
        validator: (rule, value) => {
          return isMobile(value);
        },
        message: "电话格式错误",
      },
    ],
    address: [{ required: true, message: "请输入地址" }],
    business: [{ required: true, message: "请输入经营描述" }],
  },
  form
);
const handleSubmit = async () => {
  const res = await validate();
  if (!res) return;
  if (!shopImage.value) {
    message("请上传头像");
    return;
  }
  await updateAuthentication({
    ...form,
    shopImage: shopImage.value,
  });
  uni.switchTab({
    url: "/pages/home/index",
  });
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.u-upload__wrap {
  justify-content: flex-end;
}

.u-upload__button {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

.box {
  background-color: #fff;
  margin-bottom: 10px;
}

.btn {
  margin: 23px 16px 0;
}

.upload {
  flex: 1;
}
</style>
